import React, { Component } from 'react';
import tabOneHome from './tabOneHome';
import tabTwoHome from './tabTwoHome';
import tabThreeHome from './tabThreeHome';
import tabFourHome from './tabFourHome';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
  createReduxContainer,
  createReactNavigationReduxMiddleware,
  createNavigationReducer,
} from 'react-navigation-redux-helpers';
import { connect, } from 'react-redux';

const mapStateToProps = (state) => ({
  nav: state.nav,
  sharedState: state.sharedState,
  state: state.nav, // 这个没有会报“router” not found错误
});

// 每个子页面都需要connect
function reduxWarp(component) {
  return connect(mapStateToProps)(component);
}

export const TabNavigator = createBottomTabNavigator({
  Home: reduxWarp(tabOneHome),
  Message: reduxWarp(tabTwoHome),
  Todo: reduxWarp(tabThreeHome),
  Settings: reduxWarp(tabFourHome),
}, {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let IconComponent = Ionicons;
        let iconName = 'information-circle';
        if (routeName === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
          // Sometimes we want to add badges to some icons.
          // You can check the implementation below.
          // IconComponent = HomeIconWithBadge;
        } else if (routeName === 'Settings') {
          iconName = focused ? 'ios-list-box' : 'ios-list';
        }
        switch (routeName) {
          case 'Home': {
            iconName = focused
            // ? 'ios-information-circle'
            // : 'ios-information-circle-outline';
            ? 'ios-home'
            : 'ios-home';
            break;
          }
          case 'Message': {
            iconName = focused
            ? 'ios-heart'
            : 'ios-heart-empty';
            break;
          }
          case 'Todo': {
            iconName = focused ? 'ios-list-box' : 'ios-list';
            break;
          }
          case 'Settings': {
            // iconName = focused ? 'ios-list-box' : 'ios-list';
            iconName = focused ? 'ios-settings' : 'ios-settings';
            break;
          }
          default: {
            iconName = focused ? 'ios-help-circle' : 'ios-help-circle-outline';
          }
        }

        // You can return any component that you like here!
        return <IconComponent name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
});

// export default createAppContainer(TabNavigator);

const App = createReduxContainer(TabNavigator);
export default connect(mapStateToProps)(App);
